<!--
 * @FileDescription: 新增/修改 装置弹窗
 * @Author: 祝小文
 * @Date: 2022-10-08 09:15
 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { emitter } from '@/composables'
import Title from '@/components/title/index.vue'
import upload from '@/components/upload/index.vue'
import DialogPopUp from '@/components/DialogPopUp/index.vue'
import { checkNumberTypeAndLength } from '@/utils/common'
import { queryZdZdmcInfo, queryZZXXInfo, insertOrUpdateZZXX } from '@/service/api'
import { useProfessionalStore } from '@/store'
const chemicalStore = useChemicalStore()
const data = useProfessionalStore()
const device = chemicalStore.productionStorage.device
defineExpose({ clickFileHandle })
const props = defineProps({
  cjInfo: {
    type: Object,
    default: () => {
      return {}
    },
  }, //采集信息,
})

//字典
const ywBool: any = chemicalStore.commonDictionaries.ywBool
const syzt: any = chemicalStore.commonDictionaries.syzt
const wxydj: any = chemicalStore.commonDictionaries.wxydj

//字段默认值
function fieldDefault() {
  if (props.cjInfo.lx === 'edit') {
    const selectField = ['syzt', 'cgwxydjlx']
    for (const key in zzInfo.value) {
      if (selectField.includes(key) && zzInfo.value[key] === '0') {
        if (key === 'syzt') {
          zzInfo.value.syzt = syzt[0].zddm
        } else if (key === 'cglx') {
          zzInfo.value.wxydj = wxydj[0].zddm
        }
      }
    }
  } else {
    zzInfo.value.syzt = syzt[0].zddm
    zzInfo.value.wxydj = wxydj[0].zddm

    const ywBool: any = ['ywfsy']
    for (const key in zzInfo.value) {
      if (ywBool.includes(key)) {
        zzInfo.value[key] = '0'
      }
    }
  }
}

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//装置信息
const zzInfo = ref({
  zzqmc: '',
  syzt: '',
  wxydj: '',
  zzqjj: '',
  zzscnl: '',
  ywfsy: '',
  fsylx: '',
  bz: '',
})
//附件信息
const fjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const fileupload = ref()
//必填字段
const requiredNameArr = ['zzqmc', 'syzt', 'wxydj', 'zzscnl', 'ywfsy', 'rymc', 'ryyddh', 'ryzbdh']
//联系人信息标题
const fzrxxTitleList = [{ kind: '负责人' }]
//联系人信息
const fzrxxInfoList = ref([{ rymc: '', ryyddh: '', ryzbdh: '', rysx: '1' }])
//主要原料名称
const zyylmcList = ref([{ name: '', state: false }])
//中间品名称
const zjpmcList = ref([{ name: '', state: false }])
//输出产品名称
const sccpmcList = ref([{ name: '', state: false }])

/** 表格 保存事件 */
const tableSaveClick = (item: any, index: any, type: any) => {
  if (!item.name) {
    return ElMessage.warning('请填写名称')
  }
  item.state = true
  //如果保存的数据是最后一项才需要添加新的一行
  if (type === 'zyyl') {
    if (zyylmcList.value.length === index + 1) {
      zyylmcList.value.push({ name: '', state: false })
    }
  } else if (type === 'zjp') {
    if (zjpmcList.value.length === index + 1) {
      zjpmcList.value.push({ name: '', state: false })
    }
  } else if (type === 'sccp') {
    if (sccpmcList.value.length === index + 1) {
      sccpmcList.value.push({ name: '', state: false })
    }
  }
}

/** 表格 修改事件 */
const tableEditClick = (item: any) => {
  item.state = false
}

/** 表格 删除事件 */
const tableDeleteClick = (index: any, type: any) => {
  if (type === 'zyyl') {
    zyylmcList.value.splice(index, 1)
  } else if (type === 'zjp') {
    zjpmcList.value.splice(index, 1)
  } else if (type === 'sccp') {
    sccpmcList.value.splice(index, 1)
  }
}

function clickFileHandle() {
  fileupload.value.fjxxInfoListsf = data.basicInfoData.fjxxInfoList || fjxxInfoList.value
}
function uploadCuccess(val: any) {
  fjxxInfoList.value = val.value
}
function uploadDelete(val: any) {
  fjxxInfoList.value = val
}

/** 渲染装置信息 */
function loadDeviceInfo() {
  queryZZXXInfo({ key: props.cjInfo.cjId }).then((res: any) => {
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    //联系人信息赋值
    const fzrxxData = JSON.parse(JSON.stringify(res.fzrxxInfoList))
    delete res.fzrxxInfoList
    fzrxxInfoList.value.forEach((item: any) => {
      fzrxxData.forEach((el: any) => {
        if (item.rysx === el.rysx) {
          item.id = el.id
          item.rymc = el.rymc
          item.ryyddh = el.ryyddh
          item.ryzbdh = el.ryzbdh
        }
      })
    })

    //附件信息赋值
    fileupload.value.fjxxInfoListsf = res.fjxxInfoList
    fjxxInfoList.value = res.fjxxInfoList
    delete res.fjxxInfoList

    //表格数据赋值
    if (res.zyylmc) {
      zyylmcList.value = []
      res.zyylmc.split('&^').forEach((item: any) => {
        zyylmcList.value.push({ name: item, state: true })
      })
      zyylmcList.value.push({ name: '', state: false })
      delete res.zyylmc
    }

    if (res.zjcpmc) {
      zjpmcList.value = []
      res.zjcpmc.split('&^').forEach((item: any) => {
        zjpmcList.value.push({ name: item, state: true })
      })
      zjpmcList.value.push({ name: '', state: false })
      delete res.zjcpmc
    }

    if (res.sccpmc) {
      sccpmcList.value = []
      res.sccpmc.split('&^').forEach((item: any) => {
        sccpmcList.value.push({ name: item, state: true })
      })
      sccpmcList.value.push({ name: '', state: false })
      delete res.sccpmc
    }

    zzInfo.value = res

    fieldDefault() //字段默认值
  })
}

/** 取消点击事件 */
const cancelClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  device.addDeviceShow = false
}

/** 重置点击事件 */
const resetClick = () => {
  zzInfo.value = {
    zzqmc: '',
    syzt: '',
    wxydj: '',
    zzqjj: '',
    zzscnl: '',
    ywfsy: '',
    fsylx: '',
    bz: '',
  }
  fzrxxInfoList.value = [{ rymc: '', ryyddh: '', ryzbdh: '', rysx: '1' }]

  //下拉框默认值
  zzInfo.value.syzt = syzt[0].zddm
  zzInfo.value.wxydj = wxydj[0].zddm

  const ywBool: any = ['ywfsy']
  for (const key in zzInfo.value) {
    if (ywBool.includes(key)) {
      zzInfo.value[key] = '0'
    }
  }

  zyylmcList.value[zyylmcList.value.length - 1].name = ''
  zjpmcList.value[zjpmcList.value.length - 1].name = ''
  sccpmcList.value[sccpmcList.value.length - 1].name = ''
}

/** 保存点击事件 */
const saveClick = () => {
  /** 校验数据非空 Start */
  // let flag = false
  // //基本信息
  // for (const key in zzInfo.value) {
  //   if (requiredNameArr.includes(key) && !zzInfo.value[key]) {
  //     console.log(key, '字段未填写')
  //     flag = true
  //   }
  // }
  // //联系人信息
  // fzrxxInfoList.value.forEach((item) => {
  //   for (const key in item) {
  //     if (requiredNameArr.includes(key) && !item[key]) {
  //       console.log(key, '字段未填写')
  //       flag = true
  //     }
  //   }
  // })
  // //主要原料名称
  // if (
  //   zyylmcList.value.length === 1 &&
  //   (zyylmcList.value[0].name === '' || !zyylmcList.value[0].state)
  // ) {
  //   flag = true
  // }
  // //中间品名称
  // if (
  //   zjpmcList.value.length === 1 &&
  //   (zjpmcList.value[0].name === '' || !zjpmcList.value[0].state)
  // ) {
  //   flag = true
  // }
  // //输出产品名称
  // if (
  //   sccpmcList.value.length === 1 &&
  //   (sccpmcList.value[0].name === '' || !sccpmcList.value[0].state)
  // ) {
  //   flag = true
  // }
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }

  // if (
  //   fjxxInfoList.value.length > 0 &&
  //   fjxxInfoList.value[fjxxInfoList.value.length - 1].fjlx == ''
  // ) {
  //   fjxxInfoList.value.splice(fjxxInfoList.value.length - 1, 1)
  // }
  /** 校验数据非空 End */

  /** 校验数据类型和长度 Strat */
  if (!checkNumberTypeAndLength(fzrxxInfoList.value[0].ryyddh, '手机号', 11)) {
    return
  }
  /** 校验数据类型和长度 End */

  device.addDeviceShow = false
  //过滤为空的数据 拼接为字符串
  let zyylmc = ''
  zyylmcList.value.forEach((item: any) => {
    if (item.name && item.state) {
      zyylmc += `${item.name}&^`
    }
  })
  //截取掉最后的&^符号
  zyylmc = zyylmc.substring(0, zyylmc.lastIndexOf('&^'))

  let zjcpmc = ''
  zjpmcList.value.forEach((item: any) => {
    if (item.name && item.state) {
      zjcpmc += `${item.name}&^`
    }
  })
  //截取掉最后的&^符号
  zjcpmc = zjcpmc.substring(0, zjcpmc.lastIndexOf('&^'))

  let sccpmc = ''
  sccpmcList.value.forEach((item: any) => {
    if (item.name && item.state) {
      sccpmc += `${item.name}&^`
    }
  })
  //截取掉最后的&^符号
  sccpmc = sccpmc.substring(0, sccpmc.lastIndexOf('&^'))

  //联系人信息
  fzrxxInfoList.value.forEach((item: any) => {
    item.qyid = qyId.value
    item.sfyx = 1
  })

  //附件信息
  zzInfo.value.fjxxInfoList = fjxxInfoList.value.filter((item: any) => item.fjmc !== '')

  const params: any = {
    ...zzInfo.value,
    zyylmc,
    zjcpmc,
    sccpmc,
    fzrxxInfoList: fzrxxInfoList.value,
    qyid: qyId.value,
    sfyx: 1,
  }

  //如果是修改需要传cjid
  if (props.cjInfo.lx === 'edit') {
    params.id = props.cjInfo.cjId
  }

  insertOrUpdateZZXX(params)
    .then((res: any) => {
      emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

      //添加
      if (props.cjInfo.lx === 'add') {
        ElMessage.success('新增装置成功')
      }
      //修改
      else if (props.cjInfo.lx === 'edit') {
        ElMessage.success('修改装置成功')
        //需要修改地图要素的标注名称
        window.GScrollWallArray.forEach((item: any) => {
          if (item.name === props.cjInfo.cjId) {
            item.scrollwallLabel.feature3D.setText(zzInfo.value.zzqmc)
          }
        })
      }
      //刷新数据
      emitter.emit('zz_refreshData')
    })
    .catch((err: any) => {
      if (props.cjInfo.lx === 'add') {
        ElMessage.error('新增装置失败')
      } else if (props.cjInfo.lx === 'edit') {
        ElMessage.error('修改装置失败')
      }
    })
}

/** 如果是修改，需要重新渲染数据 */
watch(
  () => props.cjInfo.cjId,
  (newValue, oldValue) => {
    if (props.cjInfo.lx === 'edit') {
      loadDeviceInfo()
    } else {
      resetClick() //重置表单
      fieldDefault() //字段默认值
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <DialogPopUp
    title="装置信息"
    @cancel-click="cancelClick"
    @reset-click="resetClick"
    @save-click="saveClick"
  >
    <!-- 表单 -->
    <div>
      <!-- 装置基本信息 -->
      <div>
        <Title title-info="基本信息" />
        <el-form label-width="110px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="装置名称">
                <el-input v-model="zzInfo.zzqmc" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="使用状态">
                <el-select v-model="zzInfo.syzt" placeholder="请选择">
                  <el-option
                    v-for="item in syzt"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="危险源等级">
                <el-select v-model="zzInfo.wxydj" placeholder="请选择">
                  <el-option
                    v-for="item in wxydj"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="装置概述">
                <el-input v-model="zzInfo.zzqjj" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="装置生产能力">
                <el-input v-model="zzInfo.zzscnl" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="有无放射源">
                <el-select v-model="zzInfo.ywfsy" placeholder="请选择">
                  <el-option
                    v-for="item in ywBool"
                    :key="item.zddm"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="放射源名称及类型" prop="fsylx">
                <el-input v-model="zzInfo.fsylx" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="bz">
                <el-input v-model="zzInfo.bz" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 主要原料名称 -->
          <div class="table-title" style="margin-top: 0">
            <div></div>
            <div>
              <!-- <span>*</span> -->
              主要原料名称
            </div>
            <div></div>
          </div>
          <div class="zyyl table-container">
            <div class="table-top-th">
              <div>序号</div>
              <div>名称</div>
              <div>操作</div>
            </div>
            <div class="table-content">
              <div v-for="(item, index) in zyylmcList" :key="index" class="table-item">
                <div>{{ index + 1 }}</div>
                <div>
                  <el-input
                    v-if="!item.state"
                    v-model="item.name"
                    style="width: 80%"
                    size="small"
                  />
                  <span
                    v-else
                    style="display: inline-block; width: 380px"
                    class="single-line-text-exceeds"
                    :title="item.name"
                    >{{ item.name }}</span
                  >
                </div>
                <div>
                  <div v-if="!item.state">
                    <img
                      src="@/assets/image/fire/保存.png"
                      style="cursor: pointer"
                      @click="tableSaveClick(item, index, 'zyyl')"
                    />
                  </div>
                  <div v-else>
                    <img
                      style="cursor: pointer; margin-right: 10px"
                      src="@/assets/image/fire/编辑.png"
                      @click="tableEditClick(item)"
                    />
                    <img
                      style="cursor: pointer"
                      src="@/assets/image/fire/删除.png"
                      @click="tableDeleteClick(index, 'zyyl')"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 中间品名称 -->
          <div class="table-title">
            <div></div>
            <div>
              <!-- <span>*</span> -->
              中间品名称
            </div>
            <div></div>
          </div>
          <div class="zjp table-container">
            <div class="table-top-th">
              <div>序号</div>
              <div>名称</div>
              <div>操作</div>
            </div>
            <div class="table-content">
              <div v-for="(item, index) in zjpmcList" :key="index" class="table-item">
                <div>{{ index + 1 }}</div>
                <div>
                  <el-input
                    v-if="!item.state"
                    v-model="item.name"
                    style="width: 80%"
                    size="small"
                  />
                  <span
                    v-else
                    style="display: inline-block; width: 380px"
                    class="single-line-text-exceeds"
                    :title="item.name"
                    >{{ item.name }}</span
                  >
                </div>
                <div>
                  <div v-if="!item.state">
                    <img
                      src="@/assets/image/fire/保存.png"
                      style="cursor: pointer"
                      @click="tableSaveClick(item, index, 'zjp')"
                    />
                  </div>
                  <div v-else>
                    <img
                      style="cursor: pointer; margin-right: 10px"
                      src="@/assets/image/fire/编辑.png"
                      @click="tableEditClick(item)"
                    />
                    <img
                      style="cursor: pointer"
                      src="@/assets/image/fire/删除.png"
                      @click="tableDeleteClick(index, 'zjp')"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 输出产品名称 -->
          <div class="table-title">
            <div></div>
            <div>
              <!-- <span>*</span> -->
              输出产品名称
            </div>
            <div></div>
          </div>
          <div class="sccp table-container">
            <div class="table-top-th">
              <div>序号</div>
              <div>名称</div>
              <div>操作</div>
            </div>
            <div class="table-content">
              <div v-for="(item, index) in sccpmcList" :key="index" class="table-item">
                <div>{{ index + 1 }}</div>
                <div>
                  <el-input
                    v-if="!item.state"
                    v-model="item.name"
                    style="width: 80%"
                    size="small"
                  />
                  <span
                    v-else
                    style="display: inline-block; width: 380px"
                    class="single-line-text-exceeds"
                    :title="item.name"
                    >{{ item.name }}</span
                  >
                </div>
                <div>
                  <div v-if="!item.state">
                    <img
                      src="@/assets/image/fire/保存.png"
                      style="cursor: pointer"
                      @click="tableSaveClick(item, index, 'sccp')"
                    />
                  </div>
                  <div v-else>
                    <img
                      style="cursor: pointer; margin-right: 10px"
                      src="@/assets/image/fire/编辑.png"
                      @click="tableEditClick(item)"
                    />
                    <img
                      style="cursor: pointer"
                      src="@/assets/image/fire/删除.png"
                      @click="tableDeleteClick(index, 'sccp')"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>

      <!-- 联系人信息 -->
      <div style="margin-top: 15px">
        <Title title-info="联系人信息" />
        <el-form style="padding-left: 30px">
          <div v-for="(item, index) in fzrxxTitleList" :key="index">
            <el-row>
              <el-col :span="24">
                <el-form-item :label="item.kind" style="margin-bottom: 0"></el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="姓名">
                  <el-input v-model.trim="fzrxxInfoList[index].rymc" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机">
                  <el-input v-model.trim="fzrxxInfoList[index].ryyddh" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="值班电话">
                  <el-input v-model.trim="fzrxxInfoList[index].ryzbdh" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>

      <!-- 上传附件 -->
      <div>
        <Title title-info="附件" />
        <upload
          ref="fileupload"
          :upload-title="['装置附件']"
          :fjlx-type="2"
          style="padding-left: 30px"
          @upload-success="uploadCuccess"
          @uploadDelete="uploadDelete"
        />
      </div>
    </div>
  </DialogPopUp>
</template>

<style lang="less" scoped>
.table-title {
  position: relative;
  top: 10px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  margin-top: 30px;
  div:first-child,
  div:last-child {
    flex: 1;
    height: 3px;
    background-color: #666;
  }
  div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    text-align: center;
    span {
      height: 24px;
      margin-right: 3px;
      font-size: 24px;
      color: rgba(254, 0, 0, 1);
    }
  }
}
.table-container {
  color: #fff;
  font-size: 16px;
  border: 1px solid #666;
  border-top: 0;
  .table-top-th {
    display: flex;
    padding-top: 18px;
    border-bottom: 1px solid #666;
    & > div {
      text-align: center;
    }
    div:nth-child(1) {
      width: 120px;
    }
    div:nth-child(2) {
      flex: 1;
    }
    div:nth-child(3) {
      width: 120px;
    }
  }
  .table-content {
    height: 150px;
    overflow: auto;
    .table-item {
      display: flex;
      align-items: center;
      height: 40px;
      border-bottom: 1px solid #666;
      & > div {
        text-align: center;
      }
      div:nth-child(1) {
        width: 120px;
      }
      div:nth-child(2) {
        flex: 1;
      }
      div:nth-child(3) {
        width: 120px;
      }
    }
  }
}
</style>
